<template>
  <div
    class="room-list"
    @click="clickEvent"
  >
    <div class="room-items">

      <img
        v-if="users.user_pic"
        :src="users.user_pic"
        alt=""
      >
      <img
        v-else
        src="../../../../../assets/avatar2.svg"
        alt=""
      >
      <span>{{users.username}}</span>
      <el-button
        type="danger"
        icon="el-icon-delete"
        circle
        style='opacity:0.85;'
        v-if="currentRoom.user_id ==user_id"
        @click.stop='btnClick'
      ></el-button>
    </div>
    <div>{{room}}</div>
  </div>

</template>

<script>
import { mapState } from "vuex";
import { deleteUserAPI } from "@/api/socket";
export default {
  data() {
    return {
      user_id: this.$store.state.users.userInfo.id,
      currentRoom: this.$store.state.chat.currentRoomInfo,
    };
  },
  props: ["users", "room"],
  methods: {
    clickEvent() {
      this.$router.push("/my/chat/info");
      this.showCurrentUserInfo();
    },
    showCurrentUserInfo() {
      this.$store.dispatch("showCurrentUserInfo", this.users.user_id);
    },

    async btnClick() {
      this.showCurrentUserInfo();
      await this.$store.dispatch("showCurrentUserInfo", this.users.user_id);
      const currentUserInfo = await this.$store.state.chat.showCurrentUserInfo;
      console.log("测试showcurrentUserINfo", currentUserInfo);
      console.log("吃啥3333", this.showCurrent);

      console.log("当前用户信息信息信息", currentUserInfo);
      console.log("测试参数 kk", currentUserInfo, this.currentRoom.id);

      const res = await deleteUserAPI(currentUserInfo.id, this.currentRoom.id);
      console.log("fffff接收的删除信息", res);
      if (res.status == 0) {
        //  删除成功后 更新当前用户列表
        // 更新用户卡片信息表为自己的--
        console.log("----当前用户名字", currentUserInfo.username);

        this.$message.success("删除成功！");
        setTimeout(() => {
          this.$socket.emit(
            "deleteUser",
            currentUserInfo.username,
            this.currentRoom.id
          );

          this.$bus.$emit("deleteUserAfterInit", this.currentRoom.id);
        }, 200);
      }
    },
  },

  computed: {
    showCurrent() {
      return this.$store.state.chat.showCurrentUserInfo;
    },
  },
  mounted() {
    console.log("ieeeeeeei", this.users);
    console.log("cc", this.currentRoom);
    this.$store.dispatch("initUserInfo");
    console.log("这里测试一下当前用户信息", this.user_id);
  },
};
</script>
 
 <style lang="less" scoped>
// 选择房间
.room-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.room-items {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 90%;
  padding: 10px;
  cursor: pointer;
}
.room-items > img {
  width: 20%;
  border: 1px solid;
}
.room-items > span {
  width: 80%;
  font-size: 1.2em;
  margin-left: 20px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 12px;
}
</style>